import { useModel } from "umi";
import { Table, Popconfirm, Tag, Radio, message } from "antd";

import useUpdateShelfStatus from "../../../hooks/application/person/useUpdateShelfStatus";
import useUpdateApplication from "../../../hooks/application/person/useUpdateApplication";

const ApplicationTable = ({ appLoading, applications, reloadData, cardBodyHeight, page, pageSize }) => {
    const { stateColor } = useModel("global");
    const { loading: updateLoading, updateShelfStatus } = useUpdateShelfStatus();
    const { updateApplication } = useUpdateApplication();

    const save = async (record, values) => {
        updateApplication(record.appUuid, values, (res) => {
            if (res) {
                message.success("保存成功！");
                reloadData();
            }
        });
    };

    const RenderNo = (_, r, i) => {
        if (page && pageSize) {
            return (page - 1) * pageSize + i + 1;
        } else {
            return i + 1;
        }
    };

    const RenderAppFree = (_, r, i) => {
        return (
            <Radio.Group value={_} onChange={(e) => save(r, { appFree: e.target.value })}>
                <Radio value={true}>免费</Radio>
                <Radio value={false}>收费</Radio>
            </Radio.Group>
        );
    };

    const RenderIsOpen = (_, r, i) => {
        return (
            <Radio.Group value={_} onChange={(e) => save(r, { isOpen: e.target.value })}>
                <Radio value={true}>公开</Radio>
                <Radio value={false}>私有</Radio>
            </Radio.Group>
        );
    };

    const RenderAppStat = (_, r, i) => {
        return (
            <Popconfirm
                title={`确认要下架【${r.appName}】该应用吗?`}
                placement="topRight"
                okButtonProps={{ loading: updateLoading }}
                onConfirm={(e) => {
                    e.stopPropagation();
                    updateShelfStatus([r.appUuid], "已下架", (res) => {
                        if (res) {
                            message.success("下架成功！");
                            reloadData();
                        }
                    });
                }}
                onCancel={(e) => e.stopPropagation()}
            >
                <Tag color={stateColor[_]} style={{ margin: 0 }}>
                    {_}
                </Tag>
            </Popconfirm>
        );
    };

    const columns = [
        { title: "序号", width: 60, align: "center", render: RenderNo },
        { title: "应用名称", dataIndex: "appName", align: "left" },
        { title: "应用分类", dataIndex: "pacName", align: "left" },
        { title: "所属角色", dataIndex: "appRole", align: "left" },
        { title: "是否免费", dataIndex: "appFree", align: "center", render: RenderAppFree },
        { title: "是否公开", dataIndex: "isOpen", align: "center", render: RenderIsOpen },
        { title: "上架状态", dataIndex: "appStat", align: "center", width: 100, render: RenderAppStat },
    ];

    return (
        <Table
            loading={appLoading}
            size="small"
            dataSource={applications}
            columns={columns}
            rowKey="appUuid"
            bordered
            pagination={false}
            scroll={{
                y: cardBodyHeight - 40 - 50,
            }}
        />
    );
};

export default ApplicationTable;
